<template>
<div class="box">
  <Header :addL="addL"></Header>
  <List :todos="todos" :deleteI="deleteI" />
  <Ft :todos="todos" :updateTodos="updateTodos" :deleteChooseAll="deleteChooseAll"></Ft>
</div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import {Todo} from "@/types/todo.ts"
import Header from '@/views/demoClass/components/Header.vue'
import Ft from '@/views/demoClass/components/Footer.vue'
import List from '@/views/demoClass/components/List.vue'
@Options({
  components: {Header,Ft,List}
})
export default class Test extends Vue {
    todos:Todo[] = [{
        id:1,
        title:'小23212明',
        isCheck:false
      },{
        id:2,
        title:"小红",
        isCheck:true
      }]
      public addL(todo:Todo):void{
          this.todos.unshift(todo)
      }
      public deleteI(index:number):void{
          this.todos.splice(index,1)
      }
      public updateTodos(flag:boolean):void{
          this.todos.forEach(todo=>{
              todo.isCheck = flag
          })
      }
      public deleteChooseAll():void{
          this.todos = this.todos.filter(todo=>!todo.isCheck)
      }

}
</script>

<style lang="less" scoped>
.box{
  width:450px;
  box-sizing: border-box;
  padding:15px;
  border:solid 1px #ddd;
  margin:0 auto;
}
</style>
